<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>
    1、v-for 正确设置key值
    2、封装复用的模块（http请求）、组件（ui库）
    3、路由懒加载：component：() => import('./xxx.vue')
    4、productionSourceMap: false
    5、启用gzip压缩，打包体积更小
    6、keep-alive 缓存不活跃组件
    7、插件CDN方式引入，减小项目体积、图片懒加载
    8、图片使用CDN地址，图片懒加载
</p>
<section>
    <h4>首页优化的方式</h4>
    <ul>
        <li>减少代码体积</li>
        <li>压缩代码体积</li>
        <li>预加载</li>
        <li>懒加载</li>
        <li>cdn</li>
        <li>缓存</li>
        <li>函数式组件</li>
        <li>组件分割细致一点</li>
    </ul>
</section>
<section>
    <h4>vue的优化方式</h4>
    <ul>
        <li>import的方式</li>
        <li>keep-alive</li>
        <li>v-show</li>
        <li>v-for 和 v-if</li>
        <li>纯粹的数字展示，数据不要做响应式 Object.freeze</li>
        <li>虚拟滚动，只渲染看到的内容</li>
        <li>事件的销毁</li>
        <li>图片懒加载</li>
        <li>第三方组件 按需引入</li>
        <li>函数式组件</li>
        <li>子组件分割</li>
        <li>变量本地化</li>
        <li>ssr</li>
    </ul>
</section>
</body>
</html>
